<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta content="yes" name="apple-mobile-web-app-capable" />
<meta content="index,follow" name="robots" />
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<link href="pics/homescreen.gif" rel="apple-touch-icon" />
<meta content="minimum-scale=1.0, width=device-width, maximum-scale=0.6667, user-scalable=no" name="viewport" />
<link href="css/style.css" rel="stylesheet" media="screen" type="text/css" />
<script src="javascript/functions.js" type="text/javascript"></script>
<title>iWebKit Demo - Easy form elements!</title>
<meta content="iPod,iPhone,Webkit,iWebkit,Website,Create,mobile,Tutorial,free" name="keywords" />
<meta content="now completly styles thanks to css these form elements are lighter and easier to use than ever before." name="description" />
</head>

<body>

<div id="topbar">
	<div id="leftnav">
		<a href="index.html"><img alt="home" src="images/home.png" /></a><a href="navigation.html">Navigation</a></div>
	<div id="rightnav">
		<a href="integration.html">Integration</a></div>
</div>
<div class="searchbox">
	<form action="" method="get">
		<fieldset><input id="search" placeholder="search" type="text" />
		<input id="submit" type="hidden" /></fieldset>
	</form>
</div>
<div id="content">
	<ul class="pageitem">
		<li class="textbox"><span class="header">Forms</span> As you can see 
		there are a lot of form elements available for iWebKit. New in iWebKit 5 
		is the search field you see at the top of the screen. Also the elements 
		are now exclusivly styled thanks to css3 instead of javascript.</li>
	</ul>
	<form method="post">
		<fieldset><span class="graytitle">Big Fields</span>
		<ul class="pageitem">
			<li class="bigfield"><input placeholder="Username" type="text" /></li>
			<li class="bigfield">
			<input placeholder="Password" type="password" /></li>
		</ul>
		<span class="graytitle">Narrow fields</span>
		<ul class="pageitem">
			<li class="smallfield"><span class="name">Name</span><input placeholder="enter text" type="text" />
			</li>
			<li class="smallfield"><span class="name">Phone number</span><input placeholder="try this!" type="jg" />
			</li>
		</ul>
		<span class="graytitle">Checkboxes</span>
		<ul class="pageitem">
			<li class="checkbox"><span class="name">Remember Me </span>
			<input name="remember" type="checkbox" /> </li>
			<li class="checkbox"><span class="check"><span class="name">Save 
			cookie</span><input name="remember" type="checkbox" />
			</span></li>
		</ul>
		<span class="graytitle">Radio Buttons</span>
		<ul class="pageitem">
			<li class="radiobutton"><span class="name">Green</span>
			<input name="music" type="radio" value="other" /></li>
			<li class="radiobutton"><span class="name">Red</span>
			<input name="music" type="radio" value="Metal" /></li>
			<li class="radiobutton"><span class="name">Yellow</span>
			<input name="music" type="radio" value="Metal2" /></li>
		</ul>
		<span class="graytitle">Selection boxes</span>
		<ul class="pageitem">
			<li class="select"><select name="d">
			<option value="1">Starter</option>
			<option value="2">Home basic</option>
			<option value="3">Home premium</option>
			<option value="4">Bussiness</option>
			<option value="4">Enterprise</option>
			<option value="4">Ultimate</option>
			</select><span class="arrow"></span> </li>
			<li class="select"><select name="d">
			<option value="1">Tiger</option>
			<option value="2">Leopard</option>
			<option value="3">Snow Leopard</option>
			</select><span class="arrow"></span> </li>
			<li class="button">
			<input name="Submit input" type="submit" value="Submit input" /></li>
		</ul>
		<span class="graytitle">Textareas</span>
		<ul class="pageitem">
			<li class="textbox"><span class="header">Insert text</span><textarea name="TextArea" rows="4"></textarea></li>
		</ul>
		</fieldset></form>
</div>
<div id="footer">
	<a href="http://snippetspace.com">Powered by iWebKit</a></div>

</body>

</html>
